| Conditions | 27 |
| Total Lines | 395 |
| Code Lines | 268 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like script.js ➔ createMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /* |
||
| 183 | function createMap(mapOpts, OLmapPOI) { |
||
| 184 | if (!olEnable) { |
||
| 185 | return; |
||
| 186 | } |
||
| 187 | if (!olTestCSSsupport()) { |
||
| 188 | olEnable = false; |
||
| 189 | return; |
||
| 190 | } |
||
| 191 | OpenLayers.ImgPath = DOKU_BASE + 'lib/plugins/openlayersmap/lib/img/'; |
||
| 192 | OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; |
||
| 193 | |||
| 194 | // find map element location |
||
| 195 | var cleartag = document.getElementById(mapOpts.id + '-clearer'); |
||
| 196 | if (cleartag === null) { |
||
| 197 | return; |
||
| 198 | } |
||
| 199 | // create map element and add to document |
||
| 200 | var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height); |
||
| 201 | cleartag.parentNode.insertBefore(fragment, cleartag); |
||
| 202 | |||
| 203 | /** dynamic map extent. */ |
||
| 204 | var extent = new OpenLayers.Bounds(), |
||
| 205 | |||
| 206 | /** map. */ |
||
| 207 | m = new OpenLayers.Map({ |
||
| 208 | div : mapOpts.id, |
||
| 209 | projection : 'EPSG:3857', |
||
| 210 | displayProjection : new OpenLayers.Projection("EPSG:4326"), |
||
| 211 | numZoomLevels : 22, |
||
| 212 | controls : [], |
||
| 213 | theme : null |
||
| 214 | }); |
||
| 215 | |||
| 216 | if (osmEnable) { |
||
| 217 | /* add OSM map layers */ |
||
| 218 | m.addLayer(new OpenLayers.Layer.OSM()); |
||
| 219 | |||
| 220 | /* open cycle map */ |
||
| 221 | m.addLayer(new OpenLayersMap.Layer.OCM("cycle map",[ |
||
| 222 | 'https://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey='+tfApiKey, |
||
| 223 | 'https://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey='+tfApiKey, |
||
| 224 | 'https://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey='+tfApiKey ], { |
||
| 225 | visibility : mapOpts.baselyr === "transport", |
||
| 226 | apikey : tfApiKey |
||
| 227 | })); |
||
| 228 | m.addLayer(new OpenLayersMap.Layer.OCM("transport", [ |
||
| 229 | "https://a.tile.thunderforest.com/transport/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 230 | "https://b.tile.thunderforest.com/transport/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 231 | "https://c.tile.thunderforest.com/transport/${z}/${x}/${y}.png?apikey="+tfApiKey ], { |
||
| 232 | visibility : mapOpts.baselyr === "transport", |
||
| 233 | apikey : tfApiKey |
||
| 234 | })); |
||
| 235 | m.addLayer(new OpenLayersMap.Layer.OCM("landscape", [ |
||
| 236 | "https://a.tile.thunderforest.com/landscape/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 237 | "https://b.tile.thunderforest.com/landscape/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 238 | "https://c.tile.thunderforest.com/landscape/${z}/${x}/${y}.png?apikey="+tfApiKey ], { |
||
| 239 | visibility : mapOpts.baselyr === "landscape", |
||
| 240 | apikey : tfApiKey |
||
| 241 | })); |
||
| 242 | m.addLayer(new OpenLayersMap.Layer.OCM("outdoors", [ |
||
| 243 | "https://a.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 244 | "https://b.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 245 | "https://c.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png?apikey="+tfApiKey ], { |
||
| 246 | visibility : mapOpts.baselyr === "outdoors", |
||
| 247 | apikey : tfApiKey |
||
| 248 | })); |
||
| 249 | /* hike and bike map seem to be offline |
||
| 250 | m.addLayer(new OpenLayers.Layer.OSM( |
||
| 251 | "hike and bike map", "http://toolserver.org/tiles/hikebike/${z}/${x}/${y}.png", { |
||
| 252 | visibility : mapOpts.baselyr === "hike and bike map", |
||
| 253 | tileOptions : { |
||
| 254 | crossOriginKeyword : null |
||
| 255 | } |
||
| 256 | })); |
||
| 257 | */ |
||
| 258 | } |
||
| 259 | /* |
||
| 260 | * add Stamen map layers, see: http://maps.stamen.com/ |
||
| 261 | */ |
||
| 262 | if (stamenEnable) { |
||
| 263 | m.addLayer(new OpenLayersMap.Layer.StamenTerrain()); |
||
| 264 | m.addLayer(new OpenLayersMap.Layer.StamenToner()); |
||
| 265 | } |
||
| 266 | |||
| 267 | if (gEnable) { |
||
| 268 | /* load google maps */ |
||
| 269 | try { |
||
| 270 | m.addLayer(new OpenLayers.Layer.Google("google relief", { |
||
| 271 | type : google.maps.MapTypeId.TERRAIN, |
||
| 272 | numZoomLevels : 16, |
||
| 273 | animationEnabled : true, |
||
| 274 | visibility : mapOpts.baselyr === "google relief" |
||
| 275 | })); |
||
| 276 | m.addLayer(new OpenLayers.Layer.Google("google sat", { |
||
| 277 | type : google.maps.MapTypeId.SATELLITE, |
||
| 278 | animationEnabled : true, |
||
| 279 | visibility : mapOpts.baselyr === "google sat" |
||
| 280 | })); |
||
| 281 | m.addLayer(new OpenLayers.Layer.Google("google hybrid", { |
||
| 282 | type : google.maps.MapTypeId.HYBRID, |
||
| 283 | animationEnabled : true, |
||
| 284 | visibility : mapOpts.baselyr === "google hybrid" |
||
| 285 | })); |
||
| 286 | m.addLayer(new OpenLayers.Layer.Google("google road", { |
||
| 287 | animationEnabled : true, |
||
| 288 | visibility : mapOpts.baselyr === "google road" |
||
| 289 | })); |
||
| 290 | } catch (ol_err1) { |
||
| 291 | Openlayers.Console.userError('Error loading Google maps' + ol_err1); |
||
| 292 | } |
||
| 293 | } |
||
| 294 | |||
| 295 | if (bEnable && bApiKey !== '') { |
||
| 296 | try { |
||
| 297 | /* add Bing tiles */ |
||
| 298 | m.addLayer(new OpenLayers.Layer.Bing({ |
||
| 299 | key : bApiKey, |
||
| 300 | type : "Road", |
||
| 301 | name : "bing road", |
||
| 302 | visibility : mapOpts.baselyr === "bing road", |
||
| 303 | wrapDateLine : true, |
||
| 304 | attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">' |
||
| 305 | + 'Bing™</a><img src="//www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}' |
||
| 306 | + '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>' |
||
| 307 | })); |
||
| 308 | m.addLayer(new OpenLayers.Layer.Bing({ |
||
| 309 | key : bApiKey, |
||
| 310 | type : "Aerial", |
||
| 311 | name : "bing sat", |
||
| 312 | visibility : mapOpts.baselyr === "bing sat", |
||
| 313 | wrapDateLine : true, |
||
| 314 | attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">' |
||
| 315 | + 'Bing™</a><img src="//www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}' |
||
| 316 | + '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>' |
||
| 317 | })); |
||
| 318 | m.addLayer(new OpenLayers.Layer.Bing({ |
||
| 319 | key : bApiKey, |
||
| 320 | type : "AerialWithLabels", |
||
| 321 | name : "bing hybrid", |
||
| 322 | visibility : mapOpts.baselyr === "bing hybrid", |
||
| 323 | wrapDateLine : true, |
||
| 324 | attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">' |
||
| 325 | + 'Bing™</a><img src="//www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}' |
||
| 326 | + '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>' |
||
| 327 | })); |
||
| 328 | } catch (ol_errBing) { |
||
| 329 | Openlayers.Console.userError('Error loading Bing maps: ' + ol_errBing); |
||
| 330 | } |
||
| 331 | } |
||
| 332 | |||
| 333 | m.setCenter(new OpenLayers.LonLat(mapOpts.lon, mapOpts.lat).transform(m.displayProjection, m.projection), |
||
| 334 | mapOpts.zoom); |
||
| 335 | extent.extend(m.getExtent()); |
||
| 336 | |||
| 337 | // change/set alternative baselyr |
||
| 338 | try { |
||
| 339 | m.setBaseLayer(((m.getLayersByName(mapOpts.baselyr))[0])); |
||
| 340 | } catch (ol_err4) { |
||
| 341 | m.setBaseLayer(m.layers[0]); |
||
| 342 | } |
||
| 343 | |||
| 344 | m.addControls([ new OpenLayers.Control.ScaleLine({ |
||
| 345 | geodesic : true |
||
| 346 | }), new OpenLayers.Control.KeyboardDefaults({ |
||
| 347 | observeElement : mapOpts.id |
||
| 348 | }), new OpenLayers.Control.Navigation() ]); |
||
| 349 | |||
| 350 | if (mapOpts.statusbar === 1) { |
||
| 351 | // statusbar control: mouse pos. |
||
| 352 | m.addControl(new OpenLayers.Control.MousePosition({ |
||
| 353 | 'div' : OpenLayers.Util.getElement(mapOpts.id + '-statusbar-mouseposition') |
||
| 354 | })); |
||
| 355 | // statusbar control: scale |
||
| 356 | m.addControl(new OpenLayers.Control.Scale(mapOpts.id + '-statusbar-scale')); |
||
| 357 | // statusbar control: attribution |
||
| 358 | m.addControl(new OpenLayers.Control.Attribution({ |
||
| 359 | 'div' : OpenLayers.Util.getElement(mapOpts.id + '-statusbar-text') |
||
| 360 | })); |
||
| 361 | // statusbar control: projection |
||
| 362 | OpenLayers.Util.getElement(mapOpts.id + '-statusbar-projection').innerHTML = m.displayProjection; |
||
| 363 | } else { |
||
| 364 | OpenLayers.Util.getElement(mapOpts.id + '-olStatusBar').display = 'none'; |
||
| 365 | } |
||
| 366 | |||
| 367 | if (OLmapPOI.length > 0) { |
||
| 368 | var markers = new OpenLayers.Layer.Vector("POI", { |
||
| 369 | styleMap : new OpenLayers.StyleMap({ |
||
| 370 | "default" : { |
||
| 371 | cursor : "help", |
||
| 372 | externalGraphic : "${img}", |
||
| 373 | graphicHeight : 16, |
||
| 374 | graphicWidth : 16, |
||
| 375 | // graphicXOffset : 0, |
||
| 376 | // graphicYOffset : -8, |
||
| 377 | graphicOpacity : "${opacity}", |
||
| 378 | rotation : "${angle}", |
||
| 379 | backgroundGraphic : DOKU_BASE + "lib/plugins/openlayersmap/icons/marker_shadow.png", |
||
| 380 | // backgroundXOffset : 0, |
||
| 381 | // backgroundYOffset : -4, |
||
| 382 | backgroundRotation : "${angle}", |
||
| 383 | pointRadius : 10, |
||
| 384 | labelXOffset : 8, |
||
| 385 | labelYOffset : 8, |
||
| 386 | labelAlign : "lb", |
||
| 387 | label : "${label}", |
||
| 388 | // fontColor : "", |
||
| 389 | fontFamily : "monospace", |
||
| 390 | fontSize : "12px", |
||
| 391 | fontWeight : "bold" |
||
| 392 | }, |
||
| 393 | "select" : { |
||
| 394 | cursor : "help", |
||
| 395 | externalGraphic : DOKU_BASE + "lib/plugins/openlayersmap/icons/marker-red.png", |
||
| 396 | graphicHeight : 16, |
||
| 397 | graphicWidth : 16, |
||
| 398 | // graphicXOffset : 0, |
||
| 399 | // graphicYOffset : -8, |
||
| 400 | graphicOpacity : 1.0, |
||
| 401 | rotation : "${angle}" |
||
| 402 | } |
||
| 403 | }), |
||
| 404 | isBaseLayer : false, |
||
| 405 | rendererOptions : { |
||
| 406 | yOrdering : true |
||
| 407 | } |
||
| 408 | }); |
||
| 409 | m.addLayer(markers); |
||
| 410 | var features = []; |
||
| 411 | for (var j = 0; j < OLmapPOI.length; j++) { |
||
| 412 | var feat = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(OLmapPOI[j].lon, OLmapPOI[j].lat) |
||
| 413 | .transform(m.displayProjection, m.projection), { |
||
| 414 | angle : OLmapPOI[j].angle, |
||
| 415 | opacity : OLmapPOI[j].opacity, |
||
| 416 | img : DOKU_BASE + "lib/plugins/openlayersmap/icons/" + OLmapPOI[j].img, |
||
| 417 | label : OLmapPOI[j].rowId |
||
| 418 | }); |
||
| 419 | var _latlon = OLmapPOI[j].lat + 'º;' + OLmapPOI[j].lon + 'º'; |
||
| 420 | if (mapOpts.displayformat === 'DMS') { |
||
| 421 | _latlon = OpenLayers.Util.getFormattedLonLat(OLmapPOI[j].lat, 'lat') + ';' |
||
| 422 | + OpenLayers.Util.getFormattedLonLat(OLmapPOI[j].lon, 'lon'); |
||
| 423 | } |
||
| 424 | feat.data = { |
||
| 425 | name : OLmapPOI[j].txt, |
||
| 426 | rowId : OLmapPOI[j].rowId, |
||
| 427 | latlon : _latlon, |
||
| 428 | lat: OLmapPOI[j].lat, |
||
| 429 | lon: OLmapPOI[j].lon, |
||
| 430 | alt : OLmapPOI[j].img.substring(0, OLmapPOI[j].img.lastIndexOf(".")) |
||
| 431 | }; |
||
| 432 | features.push(feat); |
||
| 433 | } |
||
| 434 | markers.addFeatures(features); |
||
| 435 | if (mapOpts.autozoom) { |
||
| 436 | extent.extend(markers.getDataExtent()); |
||
| 437 | m.zoomToExtent(extent); |
||
| 438 | } |
||
| 439 | } |
||
| 440 | |||
| 441 | /* GPX layer */ |
||
| 442 | if (mapOpts.gpxfile.length > 0) { |
||
| 443 | var layerGPX = new OpenLayers.Layer.Vector("GPS route", { |
||
| 444 | protocol : new OpenLayers.Protocol.HTTP({ |
||
| 445 | url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.gpxfile, |
||
| 446 | format : new OpenLayers.Format.GPX({ |
||
| 447 | extractWaypoints : true, |
||
| 448 | extractTracks : true, |
||
| 449 | extractStyles : true, |
||
| 450 | extractAttributes : true, |
||
| 451 | handleHeight : true, |
||
| 452 | maxDepth : 3 |
||
| 453 | }) |
||
| 454 | }), |
||
| 455 | style : { |
||
| 456 | strokeColor : "#0000FF", |
||
| 457 | strokeWidth : 3, |
||
| 458 | strokeOpacity : 0.7, |
||
| 459 | pointRadius : 4, |
||
| 460 | fillColor : "#0099FF", |
||
| 461 | fillOpacity : 0.7 |
||
| 462 | // , label:"${name}" |
||
| 463 | }, |
||
| 464 | projection : new OpenLayers.Projection("EPSG:4326"), |
||
| 465 | strategies : [ new OpenLayers.Strategy.Fixed() ] |
||
| 466 | }); |
||
| 467 | m.addLayer(layerGPX); |
||
| 468 | if (mapOpts.autozoom) { |
||
| 469 | layerGPX.events.register('loadend', m, function() { |
||
| 470 | extent.extend(layerGPX.getDataExtent()); |
||
| 471 | m.zoomToExtent(extent); |
||
| 472 | }); |
||
| 473 | } |
||
| 474 | } |
||
| 475 | |||
| 476 | /* GeoJSON layer */ |
||
| 477 | if (mapOpts.geojsonfile.length > 0) { |
||
| 478 | var layerGJS = new OpenLayers.Layer.Vector("json data", { |
||
| 479 | protocol : new OpenLayers.Protocol.HTTP({ |
||
| 480 | url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.geojsonfile, |
||
| 481 | format : new OpenLayers.Format.GeoJSON({ |
||
| 482 | ignoreExtraDims : true |
||
| 483 | }) |
||
| 484 | }), |
||
| 485 | style : { |
||
| 486 | strokeColor : "#FF00FF", |
||
| 487 | strokeWidth : 3, |
||
| 488 | strokeOpacity : 0.7, |
||
| 489 | pointRadius : 4, |
||
| 490 | fillColor : "#FF99FF", |
||
| 491 | fillOpacity : 0.7 |
||
| 492 | // , label:"${name}" |
||
| 493 | }, |
||
| 494 | projection : new OpenLayers.Projection("EPSG:4326"), |
||
| 495 | strategies : [ new OpenLayers.Strategy.Fixed() ] |
||
| 496 | }); |
||
| 497 | m.addLayer(layerGJS); |
||
| 498 | if (mapOpts.autozoom) { |
||
| 499 | layerGJS.events.register('loadend', m, function() { |
||
| 500 | extent.extend(layerGJS.getDataExtent()); |
||
| 501 | m.zoomToExtent(extent); |
||
| 502 | }); |
||
| 503 | } |
||
| 504 | } |
||
| 505 | |||
| 506 | /* KML layer */ |
||
| 507 | if (mapOpts.kmlfile.length > 0) { |
||
| 508 | var layerKML = new OpenLayers.Layer.Vector("KML file", { |
||
| 509 | protocol : new OpenLayers.Protocol.HTTP({ |
||
| 510 | url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile, |
||
| 511 | format : new OpenLayers.Format.KML({ |
||
| 512 | extractStyles : true, |
||
| 513 | extractAttributes : true, |
||
| 514 | maxDepth : 3 |
||
| 515 | }) |
||
| 516 | }), |
||
| 517 | style : { |
||
| 518 | label : "${name}" |
||
| 519 | }, |
||
| 520 | projection : new OpenLayers.Projection("EPSG:4326"), |
||
| 521 | strategies : [ new OpenLayers.Strategy.Fixed() ] |
||
| 522 | }); |
||
| 523 | m.addLayer(layerKML); |
||
| 524 | if (mapOpts.autozoom) { |
||
| 525 | layerKML.events.register('loadend', m, function() { |
||
| 526 | extent.extend(layerKML.getDataExtent()); |
||
| 527 | m.zoomToExtent(extent); |
||
| 528 | }); |
||
| 529 | } |
||
| 530 | } |
||
| 531 | |||
| 532 | // selectcontrol for layers |
||
| 533 | if ((m.getLayersByClass('OpenLayers.Layer.GML').length > 0) |
||
| 534 | || m.getLayersByClass('OpenLayers.Layer.Vector').length > 0) { |
||
| 535 | selectControl = new OpenLayers.Control.SelectFeature((m.getLayersByClass('OpenLayers.Layer.Vector')).concat(m |
||
| 536 | .getLayersByClass('OpenLayers.Layer.GML')), { |
||
| 537 | hover : mapOpts.poihoverstyle, |
||
| 538 | onSelect : onFeatureSelect, |
||
| 539 | onUnselect : onFeatureUnselect |
||
| 540 | }); |
||
| 541 | m.addControl(selectControl); |
||
| 542 | selectControl.activate(); |
||
| 543 | |||
| 544 | // keyboard select control |
||
| 545 | var iControl = new OpenLayersMap.Control.KeyboardClick({ |
||
| 546 | observeElement : mapOpts.id, |
||
| 547 | selectControl : selectControl |
||
| 548 | }); |
||
| 549 | m.addControl(iControl); |
||
| 550 | } |
||
| 551 | |||
| 552 | if (mapOpts.controls === 1) { |
||
| 553 | /* add base controls to map */ |
||
| 554 | m.addControls([ new OpenLayersMap.Control.LayerSwitcher(), new OpenLayers.Control.Graticule({ |
||
| 555 | visible : false |
||
| 556 | }), new OpenLayersMap.Control.OverviewMap({ |
||
| 557 | mapOptions : { |
||
| 558 | theme : null |
||
| 559 | } |
||
| 560 | }), new OpenLayersMap.Control.Zoom(), new OpenLayersMap.Control.Fullscreen() ]); |
||
| 561 | |||
| 562 | // add hillshade, since this is off by default only add when we have a |
||
| 563 | // layerswitcher |
||
| 564 | m.addLayer(new OpenLayers.Layer.OSM("Hillshade", "https://tiles.wmflabs.org/hillshading/${z}/${x}/${y}.png", { |
||
| 565 | isBaseLayer : false, |
||
| 566 | transparent : true, |
||
| 567 | visibility : false, |
||
| 568 | displayOutsideMaxExtent : true, |
||
| 569 | attribution : '', |
||
| 570 | tileOptions : { |
||
| 571 | crossOriginKeyword : null |
||
| 572 | } |
||
| 573 | })); |
||
| 574 | } |
||
| 575 | |||
| 576 | return m; |
||
| 577 | } |
||
| 578 | |||
| 705 |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.